<template>
	<view class="paymentBox">
		<view class="header">
				
				<view>预约成功</view>
		</view>
        <view class="plr16 pt15">
            <view class="bgWhite radius8  plr15 ptb15">
                    <view class="justify-between">
                        <image style="width:240rpx;height:180rpx;border-radius:12rpx;" :src="detail.img_url" mode=""></image>
						<view class="flex1 ml10">
							<view class="title">
								{{detail.title}}
							</view>
						<!-- 	<view class="time">
								{{detail.open_date}} {{detail.start_time}} -- {{detail.open_date}}{{detail.end_time}}
							</view>
							<view class="address">
								{{detail.address}}
							</view> -->
						</view>
                    </view>
					<view class="" style="text-align: center;margin: 20rpx 0;">
					<image style="width:500rpx;height:500rpx;border-radius:12rpx;" :src="genCodeImg" mode=""></image>
						
					</view>
                    <view class="mt10">
                        <view class="mt5">
							订单编号：{{detail.orderno}}
                        </view>
                        <view class="mt5">
                            支付金额：{{detail.pay_fee}}
                        </view>
                        <view class="mt5">
                            创建时间：{{detail.create_time}}
                        </view>
						<view class="mt5">
						    支付时间：{{detail.pay_time}}
						</view>
                    </view>
            </view>
			<!-- <view class="moduleTitle ft16 ">预约须知    </view>
			<view class="bgWhite radius8 ptb15 plr25 ft16 " style="line-height: 56rpx;color: #3d3d3d;">
			    {{detail.notice 	}}
			</view>
			<view class="moduleTitle ft16 ">交通指引    </view>
			<view class="bgWhite radius8 ptb15 plr25 ft16 " style="line-height: 56rpx;color: #3d3d3d;">
			    {{detail.traffic }}
			</view> -->
		</view>	
	</view>
</template>

<script>
	import operate from '@/common/operate.js'
	export default {
		data() {
			return {
				fileList1: [],
                id:"",
                detail:{},
                
                form:{
                    order_id:"",
                    pay_image:""
                },
                imgList:[],
                payImg:"",
				appointer:{},
				genCodeImg:""
			};
		},
        onLoad(opt) {
            // this.getPayMode()
            if(opt.orderno){
                this.id = opt.orderno
                this.getDetail()
                this.orderInfo()
                
            }
        },
		methods: {
			orderInfo(){
				this.$api.actCheckOrder({orderno:this.id}).then(res=>{
					console.log(res)
					this.detail=res.data
					this.detail.img_url = operate.api+this.detail.img_url
					// this.appointer = res.appointer
				})
			},
            async getPayMode(){
                const {code,data}  = await  this.$api.paymentCode()
                
                if(code==1){
                    this.payImg = data
                }
                
            },
            delImg(){
              this.form.pay_image = ''  
            },
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
            async  getDetail(){
              const data  = await  this.$api.genCode({orderno:this.id})
              console.log(data)
             this.genCodeImg = operate.api+data.imgUrl
            
            },
			//添加照片
			addImgBtn() {
				this.$refs.addCarImg.open();
			},
			coleAddImg(){
				this.$refs.addCarImg.close();
			},
			//合同按钮
			contractBtn() {
				this.$refs.dzContract.open();
			},
			//合同弹窗关闭
			contractClose() {
				this.$refs.dzContract.close();
			},
			//更多照片
			moreImg() {
				this.$refs.checkCar.open();
			},
			//验证车弹窗关闭
			carImgClose() {
				this.$refs.checkCar.close();
			},
            async getCartImg(){
                    const {data}  =   await  this.$api.cartImage({order_id:this.id})
                    
                    this.imgList = data.list
                    
            },
            uploadFile (type, directory) {
              let vm = this
              uni.chooseImage({
                count: 1, //最多可以选择的图片总数
                // sizeType: sizeType, // 可以指定是原图还是压缩图，默认二者都有
                // sourceType: sourceType, // 可以指定来源是相册还是相机，默认二者都有
                success: async (res) => {
                  let data = {
                    filePath: res.tempFilePaths[0],
                    formData: {
                      directory
                    },
                    header: {
                        // #ifdef MP
                        'Content-Type': 'application/x-www-form-urlencoded',
                        // #endif
                      'Token': uni.getStorageSync('logintoken')
                    }
                  }
                  vm.$api.uploadImg(data).then(res => {
                        vm.form.pay_image=res.fullurl
                  })
                },
              })
            },
            addCarImgdata(){
                    
                    if(!this.form.pay_image) return this.$utils.msg('请上传支付凭证')
                    uni.showLoading({
                        title:'加载中'
                    })
                    this.$api.addPayImage(this.form).then(res=>{
                        uni.hideLoading()
                        
                        if(res.code==1){
                            this.$utils.msg('添加成功')
                            setTimeout(()=>{
                                uni.reLaunch({
                                    url:'/pages/tabbar/myOrder'
                                })
                            },800)
                        }else{
                            this.$utils.msg(res.msg)
                        }
                    })
                    
            }
		}
	}
</script>

<style lang="scss" scoped>
	.paymentBox {
		min-height: 100vh;
		background-color: #F5F5F5;
		padding-bottom: 97rpx;
        position: relative;
        .header{
			background: linear-gradient(90deg, rgba(44, 198, 161, 1) 0%, rgba(99, 226, 195, 1) 100%);
			height:198rpx;
			color:#fff;
			text-align:center;
			text-align:center;
			image{
				margin-top: 60rpx;
				width: 64rpx;
			}
		}
        
	}	
    .actionBox{
        view{
            padding: 12rpx  46rpx;
            border-radius: 86rpx;
            border: 2rpx solid #2CC6A1;
            color: #2CC6A1;
            font-size: 32rpx;
        }
        
    }
    .pay{
        width: 100%;
        height: 92rpx;
        background: #FFFFFF;
        border-radius: 12rpx ;
        border: 2rpx solid #2CC6A1;
        font-size: 32rpx;
        color: #2CC6A1;
        line-height: 92rpx;
        background: #2CC6A1;
        color: #fff;
        text-align: center;
    }
	.title{
		font-size: 32rpx;
		font-weight:600;
		margin-bottom: 10rpx;
	}
	.moduleTitle{
	    font-weight: 600;
	    color: #000000;
	    line-height: 54rpx;
	    margin: 30rpx 0 10rpx;
	}
</style>